<template>
  <el-container>
    <el-header>
      <span class="siteIcon" style="font-size: 24px; color: #e9eef3">
        <img :src="logo" @click="returnlink" style="height: 70px" />
      </span>
      <span class="return">
        <el-button
          type="text"
          @click="returnlink"
          style="font-size: 24px; color: #e9eef3"
          >回到首页</el-button
        >
      </span>
      <el-dropdown class="cyr-drop" v-if="this.$store.getters.isLogin==true||this.$store.getters.isLogin=='true'">
        <span class="el-dropdown-link">
            <span
            class="span4"
            style="
              width: 100px;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: normal;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              float: right;
              font-weight:600;">
            {{ $store.getters.userName }}
          </span>
          <div class="span4" style="float: right;font-weight:600;">您好,</div>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="returnmydoor">我的门户</el-dropdown-item>
            <el-dropdown-item divided @click="returnperinfo"
              >账户信息</el-dropdown-item
            >
            <el-dropdown-item divided @click="returnout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button
        class="login"
        type="text"
        @click="login"
        style="font-size: 24px; color: #e9eef3;font-weight:600;"
        v-else
        >登录</el-button
      >
    </el-header>
    <el-main>
      <div class="base1">
        <el-card class="box-card" v-loading="loading">
          <template #header>
            <div class="card-header">
              <span>门户申诉--对{{ this.doorname }}的门户</span>
            </div>
          </template>
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="申诉类型" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="学术成果归属错误"></el-radio>
                <el-radio label="门户认领错误" disabled></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="申诉成果" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox
                  v-for="(item, key) in acd_ach"
                  :key="key"
                  :label="item.title"
                  name="type"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="成果错误类型" prop="a">
              <el-select v-model="ruleForm.a">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="申诉理由" prop="desc">
              <el-input v-model="ruleForm.desc" type="textarea"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确认申诉</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置内容</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
// import { defineComponent,reactive, toRefs } from "vue";
import logo from "../assets/no_border.png";
import axios from "axios";
import { useStore } from "vuex";
import qs from "qs";
export default {
  data() {
    const store = useStore();
    console.log(store.state.own_door);
    return {
      loading: "true",
      data: {},
      temp: "",
      doorname: "",
      acd_ach: "",
      logo,
      options: [
        {
          value: "1",
          label: "这是我的学术成果",
        },
        {
          value: "0",
          label: "不是我也不是他的学术成果",
        },
      ],
      ruleForm: {
        a: "",
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        a: [
          {
            required: true,
            message: "请选择至少一种错误类型",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请选择至少一种申诉类型",
            trigger: "change",
          },
        ],
        resource: [
          {
            required: true,
            message: "请选择至少一项要申诉的学术成果",
            trigger: "change",
          },
        ],
        desc: [
          {
            required: true,
            message: "请输入申诉理由",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    GetUserInfo() {
      axios
        .post("port_info/", { expert_id: this.$route.params.id })
        .then((response) => {
          console.log(response.data);
          if (response.data.code == 0) {
            this.doorname = response.data.form.name;
            this.acd_ach = response.data.acd_ach;
            this.loading = false;
          } else {
            alert(response.data.msg);
          }
        });
    },
    returnlink() {
      this.$router.push("/");
    },
    returnmydoor() {
      if (this.$store.state.own_door == true||this.$store.state.own_door == "true") {
        if (this.$store.state.isCompany == true||this.$store.state.isCompany == "true") {
          this.$router.push("/mycompanydoor");
        } else this.$router.push("/mydoortrue");
      } else this.$router.push("/mydoorfalse");
    },
    returnperinfo() {
      this.$router.push("/personalcenterforsee");
    },
    returnout() {
      this.$router.push("/");
      this.$store.commit("updateown_door", false);
      this.$store.commit("updateUserName", "");
      this.$store.commit("updateUserID", "");
      this.$store.commit("updateUserEmail", "");
      this.$store.commit("updateCTA", "");
      this.$store.commit("updateMPID", "");
      this.$store.commit("updatePID", "");
      this.$store.commit("updateIsLogin", false);
    },
    login() {
      this.$router.push("/login");
    },
    change() {
      for (let i = 0; i < this.ruleForm.type.length; i++) {
        for (let j = 0; j < this.acd_ach.length; j++) {
          if (this.ruleForm.type[i] == this.acd_ach[j].title)
            this.temp = this.temp + this.acd_ach[j].id + ",";
        }
      }
    },
    //申诉
    submitForm(formName) {
      this.change();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.data["appeal_type"] = 0;
          // this.data["port_id"]=this.$route.query.index;
          // this.data["user_id"]=this.$store.getters.userID;
          // this.data["user_port_id"]=this.$store.getters.userDoor;
          this.data["port_id"] = this.$store.getters.portal_id;
          this.data["user_id"] = this.$store.getters.userID;
          this.data["user_port_id"] = this.$store.getters.my_portal_id;
          this.data["aca_ach_type"] = this.ruleForm.a;
          this.data["aca_ach"] = this.temp;
          this.data["authentication"] = this.ruleForm.desc;
          let finall = qs.stringify(this.data);
          axios.post("port_appeal/", finall).then((response) => {
            console.log(response.data);
            if (response.data.code == 0) {
              this.$message({
                type: "success",
                message: "申诉成功!",
              });
              window.history.go(-1);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    this.GetUserInfo();
  },
};
</script>

<style scoped>
.base1 {
  width: 700px;
  position: absolute;
  left: 50%;
  margin-top: 30px;
  position: absolute;
  transform: translate(-50%, -0%);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-checkbox {
  color: var(--el-checkbox-font-color);
  font-weight: var(--el-checkbox-font-weight);
  font-size: var(--el-font-size-base);
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  margin-right: 30px;
  height: 40px;
  width: 500px;
  white-space: normal;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 700px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 200px);
  max-width: calc(100% - 30px);
  border-radius: 20px;
}
.el-header {
  background-color: #1047b4;
  color: #1047b4;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.card-header {
  font-size: 20px;
  font-weight: bold;
  color: #1047b4;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  height: 30px;
}
.return {
  position: absolute;
  left: 230px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
.return .el-button--text {
  border-color: transparent;
  color: var(--el-color-primary);
  background: 0 0;
  padding-left: 0;
  font-weight: 600;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.siteIcon {
  position: absolute;
  left: 100px;
  top: -5px;
  color: #e9eef3;
}
.el-dropdown {
  position: absolute;
  left: 1200px;
  color: #e9eef3;
  font-size: 22px;
  font-weight: 400;
  line-height: 60px;
}
.el-icon-s-promotion {
  color: #1047b4;
  font-size: 30px;
  position: absolute;
  left: 800px;
  top: 200px;
  float: right;
}
.el-icon-connection {
  color: #1047b4;
  font-size: 30px;
  position: absolute;
  left: 900px;
  top: 320px;
  float: right;
}
.el-icon-paperclip {
  color: #1047b4;
  font-size: 30px;
  position: absolute;
  left: 1000px;
  top: 440px;
  float: right;
}
.open {
  font-size: 20px;
  position: absolute;
  left: 1000px;
  top: 600px;
  float: right;
}
.login {
  position: absolute;
  right: 120px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
</style>
